
<template>
  <div class="page_main">
    <!-- <LeiBreadCrumb :isFist="true"></LeiBreadCrumb> -->
    <div class="content">
      <div class="title">欢迎登录建筑构建生产管理系统</div>
    </div>
    <!-- <el-card>
      <el-table :data="tableData" class="table_bsm">
        <el-table-column
          v-for="(col, index) in cols"
          :key="index"
          :prop="col.prop"
          :label="col.label"
        >
        </el-table-column>

        <el-table-column key="123" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index)">编辑</el-button>
            <el-button>456</el-button>
            <el-button>789</el-button>
          </template>
        </el-table-column>
      </el-table>

      <LeiAgGrid :columnDefs="columnDefs" :rowData="rowData"></LeiAgGrid>
      <LeiAgGrid :columnDefs="columnDefs" :rowData="rowData"></LeiAgGrid>
      <LeiAgGrid :columnDefs="columnDefs" :rowData="rowData"></LeiAgGrid>
    </el-card> -->
  </div>
</template>

<script>
import LeiAgGrid from '@/components/LeiAgGrid'
export default {
  components: { LeiAgGrid },
  data() {
    return {
      columnDefs: [
        {
          headerName: '名称',
          field: 'title',
          checkboxSelection: true,
          filter: 'title',
        },
        { headerName: '网址', field: 'url', width: 200 },
        { headerName: '分类', field: 'catalog' },
        { headerName: 'PR', field: 'pr' },
      ],
      //需要显示的数据
      rowData: [
        { title: '谷歌', url: 'www.google', catalog: '搜索引擎', pr: 10 },
        { title: '微软', url: 'www.microsoft.com', catalog: '操作系', pr: 10 },
        { title: 'ITXST', url: 'www.itxst.com', catalog: '小站', pr: 1 },
        { title: '淘宝', url: 'www.taobao.com', catalog: '电商', pr: 8 },
      ],
      cols: [
        { prop: 'name', label: '姓名' },
        { prop: 'sex', label: '性别' },
        { prop: 'age', label: '年龄' },
      ],
      tableData: [
        {
          name: '阿熙',
          sex: '男',
          age: '18',
        },
        {
          name: '小美',
          sex: '女',
          age: '16',
          operate: [
            { name: '新增', type: 'primary', size: 'mini', click: 'add' },
            { name: '编辑', type: 'danger', size: 'mini', click: 'edit' },
            { name: '删除', type: 'primary', size: 'mini', click: 'delete' },
          ],
        },
        {
          name: '囡囡',
          sex: '女',
          age: '20',
          operate: [
            { name: '新增', type: 'primary', size: 'mini', click: 'add' },
            { name: '编辑', type: 'danger', size: 'mini', click: 'edit' },
            { name: '删除', type: 'primary', size: 'mini', click: 'delete' },
          ],
        },
      ],
    }
  },
  methods: {
    handleEdit(index) {
      console.log(index)
    },
  },
}
</script>

<style lang="scss" scoped>
.page_main {
  // height: 100vh;
}
.content {
  width: 100%;
  height: 100vh;
  background: url('../../assets/imgs/jz.png') no-repeat;
  background-size: cover;
  position: relative;
  .title {
    position: absolute;
    right: 20px;
    top: 40px;
    font-size: 48px;
    color: #fff;
    font-weight: 800;
  }
}
</style>

<!-- 对接ag-grid表格例子 -->
<!-- 
<template>
	<div class="itxst111"> 
	    <ag-grid-vue 
	     style="width: 80%; height: 200px;" 
	     class="table ag-theme-balham"
	     :columnDefs="columnDefs" 
	     :rowData="rowData" 
	     :enableColResize="true"
	     :gridReady="onGridReady"
	     @cellClicked="onCellClicked"
	     ></ag-grid-vue>
	  </div>
</template>

<script>
//引入样式文件
import 'ag-grid-community/dist/styles/ag-grid.css'
import 'ag-grid-community/dist/styles/ag-theme-balham.css'
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  //注册draggable组件
  components: {
    AgGridVue
  },
  data() {
    return {  
      //定义ag-grid列
      columnDefs: [
        {headerName: '名称', field: 'title', checkboxSelection: true},
        {headerName: '网址', field: 'url', width: 200},
        {headerName: '分类', field: 'catalog'},
        {headerName: 'PR', field: 'pr'}
      ],
      //需要显示的数据
      rowData: [
        {title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
        {title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
        {title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
        {title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
      ]
    };
  },
  methods: { 
    //ag-grid创建完成后执行的事件
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 这时就可以通过gridApi调用ag-grid的传统方法了
      this.gridApi.sizeColumnsToFit();
    },
    //单元格点击事件
     onCellClicked (cell) {
      console.log(cell);
      // 获取选中单元格的数据
      console.log(cell.value);
      // 获取选中单元格所在行号
      console.log(cell.rowIndex);
      // 获取选中单元格所在行的数据
      console.log(cell.data); 
    }
  }
}
</script>

<style scoped>

</style>
 -->
 
 <!-- 对接echart，图表例子 -->
<!-- 
<template>
	<div class="Echarts">
		<div id="main" style="width: 600px;height:400px;"></div>
	</div>

</template>

<script>
	export default {
		name: 'Echarts',
		methods: {
			myEcharts() {
				// 基于准备好的dom，初始化echarts实例 
				var myChart = this.$echarts.init(document.getElementById('main'));

				// 指定图表的配置项和数据 
				var option = {
					title: {
						text: 'ECharts 入门示例'
					},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		},
		mounted() {
			this.myEcharts();
		}
	}
</script>


<style scoped>
	#main {
		background-color: red;
	}
</style>
 -->
